$(function () {
    $('.wave').append('<div class="dot" style="top:50%;left:50%;"></div>')
        setInterval(function () {
            $('.wave').append('<div class="dot" style="top:50%;left:50%;"></div>')
        },1100);

    var btnStatus= 0,
        imgSrc=$('.rc img'),
        rc=$('.rc'),
        dbCanvas=$('.dbCanvas'),
        userAll=$('.userAll'),
        dbCanvas1=$('.dbCanvas1'),
        userAll1=$('.userAll_1'),
        myTimer=Object,
        myHead=$('.myHead'),
        aside=$('.myAside'),
        fakeloader=$('.fakeloader'),
        myBtn=$('#myBtn'),
        imgDiv=$('.imgDiv'),
        server_1=$('.server_1'),
        J_core=$('.J_core'),
        innnn=$('.innnn'),
        mysql=$('.mysql');

    $('.onoffswitch').click(function(){

            window.location='./../DRDSdetails/index.html'
    });

});
var time,
    $clickNum = 0;
function lieach1(num, thisobj) {
    $(thisobj).attr('disabled', 'disabled').removeClass('shineAction').addClass('disabledClass');
    $lists = $('.scene1_right').find('div.J_hlight_area');
    $txt_lists = $('section.optStep').find('li');
    if ($clickNum != 0 && num == 0) {
        $lists.css('opacity', '0');
        $txt_lists.css('opacity', '0');
        clearTimeout(time)
    }
    forLieach(num, thisobj, $lists, $txt_lists, time)
}
function lieach2(num, thisobj) {
    $(thisobj).attr('disabled', 'disabled').removeClass('shineAction').addClass('disabledClass');
    $lists = $('.scene2_right').find('.J_hlight_area');
    $txt_lists = $('section.optStep').find('li');
    if ($clickNum != 0 && num == 0) {
        $lists.css('opacity', '0');
        $txt_lists.css('opacity', '0');
        clearTimeout(time)
    }
    forLieach(num, thisobj, $lists, $txt_lists, time)
}
function forLieach(num, thisobj, $lists, $txt_lists, time) {
    var $index = num;
    var divlistlenght = $txt_lists.length;
    var obj = $lists[$index];
    var txt_obj = $txt_lists[$index];
    var $count = num + 1;
    var $className = 'bounce' + $count;
    var $txt_className = 'txt_bounce' + $count;
    $(txt_obj).addClass($txt_className);
    var $times = $count * 1000 + 1000;
    var $times2 = $count * 1000 + 200;
    time = setTimeout(function () {
        $(txt_obj).removeClass($txt_className).css('opacity', '1')
    }, $times);
    time = setTimeout(function () {
        $(obj).css('opacity', '1')
    }, $times2);
    if (++$index <= divlistlenght - 1) {
        forLieach($index, thisobj, $lists, $txt_lists, time)
    } else {
        time = setTimeout(function () {
            $(thisobj).removeAttr('disabled').removeClass('disabledClass').addClass('shineAction')
        }, $times)
    }
    $clickNum++
};


//数据
var time;
$(function () {
    time = setTimeout(function () {
        lightIcon()
    }, 4000);
    setTimeout(function () {
        setInterval(function () {
            lightIcon()
        }, 2000)
    }, 4000)
});
function lightIcon() {
    clearTimeout(time);
    $('#extend').find('.distribute').addClass('lightImgAction');
    setTimeout(function () {
        $('#extend').find('.distribute').removeClass('lightImgAction')
    }, 500)
}
var optionsdb0 = {
    id: 'db0',
    height: 11,
    width: 300,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'up',
    deg: 'rotate(90deg)',
    linegra: 'left'
};
var optionsdb1 = {
    id: 'db1',
    height: 11,
    width: 300,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'up',
    deg: 'rotate(90deg)',
    linegra: 'right'
};
var optionsdb2 = {
    id: 'db2',
    height: 11,
    width: 300,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'up',
    deg: 'rotate(90deg)',
    linegra: 'no'
};
var optionsdb3 = {
    id: 'db3',
    height: 11,
    width: 300,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'up',
    deg: 'rotate(90deg)',
    linegra: 'no'
};
var optionsdb4 = {
    id: 'db4',
    height: 11,
    width: 300,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'up',
    deg: 'rotate(90deg)',
    linegra: 'no'
};
var optionsdb5 = {
    id: 'db5',
    height: 11,
    width: 300,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'down',
    deg: 'rotate(-90deg)',
    linegra: 'no'
};

var optionsdb6 = {
    id: 'db6',
    height: 11,
    width: 300,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'up',
    deg: 'rotate(90deg)',
    linegra: 'no'
};
var optionsdb7 = {
    id: 'db7',
    height: 11,
    width: 300,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'up',
    deg: 'rotate(90deg)',
    linegra: 'no'
};
var optionsdb8 = {
    id: 'db8',
    height: 11,
    width: 300,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'up',
    deg: 'rotate(90deg)',
    linegra: 'no'
};
var optionsdb9 = {
    id: 'db9',
    height: 11,
    width: 300,
    font_size: 10,
    font_color: 'rgba(175,205,245,0.8)',
    direction: 'up',
    deg: 'rotate(90deg)',
    linegra: 'no'
};


function maTrix2v(opt) {
    var c = document.getElementById(opt.id);
    var ctx = c.getContext('2d');
    c.style.transform = opt.deg;
    c.height = opt.height;
    c.width = opt.width;
    var font_size = opt.font_size;
    var font_color = opt.font_color;
    var rows = c.height / (font_size);
    var columns = c.width / (font_size);
    var direction = opt.direction;
    var Mat_init_flag = 0;
    var Martrix = new Array();
    function draw() {
        ctx.fillStyle = 'rgba(255, 255, 255, 1)';
        ctx.clearRect(0, 0, c.width, c.height);
        ctx.fillStyle = font_color;
        ctx.font = font_size + 'px arial';
        getMatrix(Martrix, rows, columns, direction);
        for (var i = 0; i < rows; i++) {
            for (var j = 0; j < columns; j++) {
                text = Martrix[i][j];
                var my_gradient = ctx.createLinearGradient(0, 0, opt.width, 0);
                switch (opt.linegra) {
                    case 'left':
                        my_gradient.addColorStop(0, 'white');
                        my_gradient.addColorStop(1, font_color);
                        break;
                    case 'right':
                        my_gradient.addColorStop(0, font_color);
                        my_gradient.addColorStop(1, 'white');
                        break;
                    default:
                        my_gradient = font_color
                }
                ctx.fillStyle = my_gradient;
                ctx.fillText(text, j * font_size - j * 3, i * font_size)
            }
        }
    }
    function getMatrix(arrayname, row, col, direc) {
        if (!Mat_init_flag) {
            for (var i = 0; i < row; i++) {
                arrayname[i] = new Array();
                for (var j = 0; j < col; j++) {
                    arrayname[i][j] = Math.floor(Math.random() * 2)
                }
            }
            Mat_init_flag = 1
        }
        if (direc === 'left' || direc === 'up') {
            left()
        } else {
            if (direc === 'right' || direc === 'down') {
                right()
            } else {
                return
            }
        }
        function down() {
            for (var i = row - 1; i > - 1; i--) {
                if (i > 0) {
                    for (var j = 0; j < col; j++) {
                        arrayname[i][j] = arrayname[i - 1][j]
                    }
                } else {
                    for (var j = 0; j < col; j++) {
                        arrayname[0][j] = Math.floor(Math.random() * 2);
                        if (Math.random() > 0.95) {
                            arrayname[0][j] = ''
                        }
                    }
                }
            }
        }
        function right() {
            for (var j = col - 1; j > - 1; j--) {
                if (j > 0) {
                    for (var i = 0; i < row; i++) {
                        arrayname[i][j] = arrayname[i][j - 1]
                    }
                } else {
                    for (var i = 0; i < row; i++) {
                        arrayname[i][0] = Math.floor(Math.random() * 2);
                        if (Math.random() > 0.95) {
                            arrayname[i][0] = ''
                        }
                    }
                }
            }
        }
        function left() {
            for (var j = 0; j < col; j++) {
                if (j < col - 1) {
                    for (var i = 0; i < row; i++) {
                        arrayname[i][j] = arrayname[i][j + 1]
                    }
                } else {
                    for (var i = 0; i < row; i++) {
                        arrayname[i][col - 1] = Math.floor(Math.random() * 2);
                        if (Math.random() > 0.95) {
                            arrayname[i][col - 1] = ''
                        }
                    }
                }
            }
        }
    }
    setInterval(draw, 140)
}
maTrix2v(optionsdb0);
maTrix2v(optionsdb1);
maTrix2v(optionsdb2);
maTrix2v(optionsdb3);
maTrix2v(optionsdb4);
maTrix2v(optionsdb5);
maTrix2v(optionsdb6);
maTrix2v(optionsdb7);
maTrix2v(optionsdb8);
maTrix2v(optionsdb9);

